<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8" />
	<!--[if IE]><![endif]-->

	<title>HTML Scrabble</title>
	<meta name="DC.title" content="HTML Scrabble" />
	
	<meta name="description"
		content="A simple Scrabble clone made with HTML, CSS, JavaScript, and some server-side code to handle multiplayer games." />
	<meta name="DC.subject"
		content="A simple Scrabble clone made with HTML, CSS, JavaScript, and some server-side code to handle multiplayer games." />
		
	<meta name="author" content="Daniel Weck" />
	<meta name="DC.creator" content="Daniel Weck" />

	<meta name="Copyright" content="Open Source code, LGPL license" />

	<meta name="Copyright" content="SCRABBLE[tm] is a registered trademark. All intellectual property rights in and to the game are owned in the U.S.A and Canada by Hasbro Inc., and throughout the rest of the world by J.W. Spear &amp; Sons Limited of Maidenhead, Berkshire, England, a subsidiary of Mattel Inc. This web page and associated experiments are not associated with any of the owners." />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

	<!-- link rel="stylesheet" href="css/main.css" media="all" / -->
	<style type="text/css" media="all">
		@import "css/main.css";
	</style>

	<script type="text/javascript" src="javascript/jquery-1.4.3.min.js"></script>
	
	<!-- script type="text/javascript" src="javascript/jquery.event.drag-2.0.js"></script>
	<script type="text/javascript" src="javascript/jquery.event.drop-2.0.js"></script -->
	
	<!-- script type="text/javascript" src="javascript/jquery.animate-enhanced.min.js"></script -->
	
	<script src="javascript/jquery.blockUI.js" type="text/javascript"></script>
	
	<script src="javascript/jquery-css-transform.js" type="text/javascript"></script>
	<script src="javascript/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
	<script src="javascript/rotate3Di.js" type="text/javascript"></script>
	
	<script type="text/javascript" src="javascript/jquery-ui-1.8.7.custom.min.js"></script>
	
	<!-- script type="text/javascript" src="javascript/dictionary_English.js"></script -->
	<!--
	var re = /(,[a-z]+)\+/g;
	var re0 = /(,[a-z])([a-z]*)0/g;
	var re1 = /(,[a-z]{2})([a-z]*)1/g;
	var re2 = /(,[a-z]{3})([a-z]*)2/g;
	var re3 = /(,[a-z]{4})([a-z]*)3/g;
	var re4 = /(,[a-z]{5})([a-z]*)4/g;
	var re5 = /(,[a-z]{6})([a-z]*)5/g;
	var re6 = /(,[a-z]{7})([a-z]*)6/g;
	var re7 = /(,[a-z]{8})([a-z]*)7/g;
	var re8 = /(,[a-z]{9})([a-z]*)8/g;
	var re9 = /(,[a-z]{10})([a-z]*)9/g;

	function checkDictionary(theWord)
	{
		theWord = theWord.toLowerCase();

		if (theWord.length == 2)
		{
			return (D2.indexOf(theWord) != -1);
		}
		first3 = theWord.replace(/^(...).*/, "$1");
		if (typeof(D[first3]) == "undefined")
		{
			return false;
		}
		var theEntry = D[first3];
		if (!theEntry.match(/,$/))
		{
			// We've not looked at this entry before - uncompress it, etc.
			theEntry = theEntry.replace(/W/g, "le");
			theEntry = theEntry.replace(/K/g, "al");
			theEntry = theEntry.replace(/F/g, "man");
			theEntry = theEntry.replace(/U/g, "ous");
			theEntry = theEntry.replace(/M/g, "ment");
			theEntry = theEntry.replace(/B/g, "able");
			theEntry = theEntry.replace(/C/g, "ic");
			theEntry = theEntry.replace(/X/g, "on");
			theEntry = theEntry.replace(/Q/g, "ng");
			theEntry = theEntry.replace(/R/g, "ier");
			theEntry = theEntry.replace(/S/g, "st");
			theEntry = theEntry.replace(/Y/g, "ly");
			theEntry = theEntry.replace(/J/g, "ally");
			theEntry = theEntry.replace(/E/g, "es");
			theEntry = theEntry.replace(/L/g, "less");
			theEntry = theEntry.replace(/Z/g, "ies");
			theEntry = theEntry.replace(/P/g, "tic");
			theEntry = theEntry.replace(/I/g, "iti");
			theEntry = theEntry.replace(/V/g, "tion");
			theEntry = theEntry.replace(/H/g, "zation");
			theEntry = theEntry.replace(/A/g, "abiliti");
			theEntry = theEntry.replace(/O/g, "ologi");
			theEntry = theEntry.replace(/T/g, "est");
			theEntry = theEntry.replace(/D/g, "ed");
			theEntry = theEntry.replace(/N/g, "ness");
			theEntry = theEntry.replace(/G/g, "ing");
			theEntry = "," + theEntry + ",";
			// May have prefixes on prefixes, so need to repeat the replace.
			var more = true;
			while (more)
			{
				var theLength = theEntry.length;
				theEntry = theEntry.replace(re, "$1$1");
				theEntry = theEntry.replace(re0, "$1$2$1");
				theEntry = theEntry.replace(re1, "$1$2$1");
				theEntry = theEntry.replace(re2, "$1$2$1");
				theEntry = theEntry.replace(re3, "$1$2$1");
				theEntry = theEntry.replace(re4, "$1$2$1");
				theEntry = theEntry.replace(re5, "$1$2$1");
				theEntry = theEntry.replace(re6, "$1$2$1");
				theEntry = theEntry.replace(re7, "$1$2$1");
				theEntry = theEntry.replace(re8, "$1$2$1");
				theEntry = theEntry.replace(re9, "$1$2$1");
				more = (theLength != theEntry.length);
			}
			if (theEntry.match(/[0-@+]/))
			{
				alert("decompression oops!");
			}
			D[first3] = theEntry;
		}
		rest = theWord.replace(/^...?/, "");
		return (D[first3].indexOf("," + rest + ",") != -1);
	}
	-->
	
	<script type="text/javascript" src="javascript/BinFileReader.js"></script>	
	
	<script>var _sf_startpt=(new Date()).getTime()</script>
	
	<script type="text/javascript" src="javascript/main.js"></script>
	<!-- script type="text/javascript" src="scripts/dictionary.js"></script -->
	
	<script type="text/javascript">
	
	var game = 0;
	var board = 0;
	var rack = 0;
	var boardUI = 0;

	function playAction_resetTilesOnRack()
	{
		boardUI.SetCurrentlySelectedSquareUpdateTargets(0);
		//boardUI.CurrentlySelectedSquare = 0;
	
		rack.TakeTilesBack();
	}
	
	function playAction_submitWords()
	{}
	
	function playAction_drawNewTiles()
	{
		boardUI.SetCurrentlySelectedSquareUpdateTargets(0);
		//boardUI.CurrentlySelectedSquare = 0;

		/*
		rack.EmptyTiles();
		rack.ReplenishRandomTiles();
		*/
		
		rack.GenerateRandomTiles();
		
		//TODO: pass turn
	}
	
	function playAction_passTurn()
	{
		if (!confirm("Are you sure you want to pass your turn ?"))
		{
			return;
		}
		
		//TODO: pass
	}
	
	function resetTextField()
	{
		$("#text_field").val("");
	}
	
	function findAnagrams()
	{
		var text = $("#text_field").val();
		var anagrams = game.Dictionary.FindAnagrams(text);
		if (anagrams.length == 1)
		{
			alert("Error: the characters [" + anagrams[0] + "] do not return any anagrams from the \"" + game.Language + "\" dictionary.");
		}
		else
		{
			//alert("Success: the characters [" + anagrams[0] + "] return " + (anagrams.length-1) + " anagrams from the \"" + game.Language + "\" dictionary.");
			
			$('#anagrams').html('<p><input type="button" value="Clear Anagrams" onclick="$(\'#anagrams\').html(\'\');"></input></p>');
			
			/*
			for (var i = 1; i < anagrams.length; i++)
			{
				$('#anagrams').append('<p>' + anagrams[i] + '</p>');
			}
			*/
			
			var wordsByLength = [];
			for (var i = 0; i < game.Dictionary.MaxWordLength; i++)
			{
				wordsByLength.push([]);
			}
			
			for (var i = 1; i < anagrams.length; i++)
			{
				var word = anagrams[i];
				wordsByLength[word.length].push(word);
			}
			
			var charInput = anagrams[0];
			
			var table = "<table>";
			
			for (var i = game.Dictionary.MaxWordLength - 1; i >= 2 ; i--)
			{
				var words = wordsByLength[i];
				
				if (words.length <= 0) continue;
				
				table += "<tr>";
				
				if (charInput.length == i)
				{
					table += "<th>[" + i + "]</th>";
				}
				else
				{
					table += "<th>" + i + "</th>";
				}
				
				table += "<td>";
				
				for (var j = 0; j < words.length; j++)
				{
					var word = words[j];
					table += word;
					if (j < (words.length - 1))
					{
						table += " - ";
					}
				}
				
				table += "</td>";
				table += "<tr>";
			}
			
			table += "</table>";
			
			$('#anagrams').append(table);
		}
	}
	
	function checkWord()
	{
		var text = $("#text_field").val();
		var ok = game.Dictionary.CheckWord(text);
		if (ok)
		{
			alert("Success: [" + text + "] is in the \"" + game.Language + "\" dictionary.");
		}
		else
		{
			alert("Error: [" + text + "] is not in the \"" + game.Language + "\" dictionary.");
		}
	}
	
	function verifyBoard()
	{
		boardUI.CleanupErrorLayer();
		
		var valid = board.CheckDictionary();

		if (!valid)
		{
			Scrabble.UI.Html.prototype.OnUnblockUIFunction = function() { boardUI.CleanupErrorLayer(); };
			
			$.blockUI({
				message: "<p>Invalid words or tile placement !</p><input type=\"submit\" value=\"Return\" onclick=\"boardUI.UnblockUIFunction();\"></input>",
				focusInput: true,
				bindEvents: true,
				constrainTabKey: true,
				fadeIn: 0,
				fadeOut: 0,
				showOverlay: true,
				centerY: true,
				css: { position: "absolute", padding: "1em", backgroundColor: "black", color: "white", width: "100%", left: 0, top: $("#rack").offset().top, border: "none", textAlign: "center" },
				overlayCSS: { backgroundColor: '#FFFFFF', opacity: 0.2 },
				onBlock: function()
				{
					//console.log("modal activated");
				}
			}); 

			$('.blockOverlay').attr('title','Click to return to the game');
			$('.blockOverlay').click(
				boardUI.UnblockUIFunction
			);
		}
		else
		{
			setTimeout(function()
			{
				boardUI.CleanupErrorLayer(); 
			}, 1000);
		}

		//if (!valid) alert("Some words are invalid !");
		//else alert("All words are valid !");
	}
	
	function emptyBoardAndRack()
	{
		boardUI.SetCurrentlySelectedSquareUpdateTargets(0);
		//boardUI.CurrentlySelectedSquare = 0;
		
		board.EmptyTiles();
		rack.EmptyTiles();
	}
	
	function replenishRack()
	{
		boardUI.SetCurrentlySelectedSquareUpdateTargets(0);
		//boardUI.CurrentlySelectedSquare = 0;
		
		rack.ReplenishRandomTiles();
	}
	
	function placeRandomTiles_Rack()
	{
		boardUI.SetCurrentlySelectedSquareUpdateTargets(0);
		//boardUI.CurrentlySelectedSquare = 0;
		
		rack.GenerateRandomTiles();
	}
	
	function placeRandomTiles_Board()
	{
		boardUI.SetCurrentlySelectedSquareUpdateTargets(0);
		//boardUI.CurrentlySelectedSquare = 0;
		
		board.GenerateRandomTiles();
	}
	
	function setLanguage(lang)
	{
		game.SetLanguage(lang);
	}
	
	function placeTileSet()
	{
		boardUI.SetCurrentlySelectedSquareUpdateTargets(0);
		//boardUI.CurrentlySelectedSquare = 0;
		
		board.GenerateTilesLetterDistribution();
		//rack.GenerateRandomTiles();
	}

	function init() {

		// quit if this function has already been called
		if (arguments.callee.done) return;

		// flag this function so we don't do the same thing twice
		arguments.callee.done = true;
		
		boardUI = new window.Scrabble.UI.Html(); // must be instantiated first (to listen to Core events)

		board = new window.Scrabble.Core.Board();
		rack = new window.Scrabble.Core.Rack();

		game = new window.Scrabble.Core.Game(board, rack);
		
		/*
		if (false)
		{
			board.GenerateRandomTiles();
		}
		else
		{
			board.GenerateTilesLetterDistribution();
		}
		*/
		
		//rack.GenerateRandomTiles();
		
		$(document).ready(function(){
			
							/*
								$(this).animate({left: "+=200px", width:320 }, 1500, function() {

										$(this).animate({left: "-=200px", width:280 }, 1500, function() {

										});
									});
									*/
			//$("#board").fadeOut();
								//	table.fadeIn("fast");
								//		table.animate({rotate: '+=45deg'});


			var obj = $("#title");

			//obj.effect("pulsate", { times:2 }, 500);

			//obj.css({opacity: 0.5});
			//obj.scale(0.5);

			//obj.animate({opacity: 1}, 500);

		//obj.show("clip", {}, 500);

		//obj.effect("transfer", { to: $("#title") }, 1000);

		//obj.effect("bounce", { times: 3, direction: "right" }, 500);

			obj.rotate3Di(360, 1000,
			        {
			            sideChange: function(front) {
						    if (front) {
						        //
						    } else {
			//			        obj.animate({scale: 1}, 500);
						    }
						}
						,
			            complete: function() {
						    //
						}
			        }
			    );

		/*
				$('.drag')
					.drag("start",function( ev, dd ){

						return $( this ).clone()
							.css("opacity", .75 )
							.appendTo(this.parentNode );
					})
					.drag(function( ev, dd ){

						$( dd.proxy ).css({
							top: dd.offsetY,
							left: dd.offsetX
						},{ relative:true });
					})
					.drag("end",function( ev, dd ){
					$( dd.proxy ).animate({
					            top: dd.originalY,
					            left: dd.originalX
					         }, 420 );
						$( dd.proxy ).remove();
					});
				$('.drop')
				.drop("start",function(){
				         $( this ).addClass("dropActive");
				      })
				      .drop(function( ev, dd ){
				         $( this ).toggleClass("dropped");
				      })
				      .drop("end",function(){
				         $( this ).removeClass("dropActive");
				      });
						*/
		   });

	};

	/* for Mozilla */
	if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", init, false);
	}

	/* for Internet Explorer */
	/*@cc_on @*/
	/*@if (@_win32)
	document.write("<script defer src=ie_onload.js><"+"/script>");
	/*@end @*/

	/* for other browsers */
	window.onload = init;
	</script>

	<!--[if IE]> 
	<style type="text/css" media="all">
	div.surroundShade table,
	div.bottomShade table
	{
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#333333', Direction=135, Strength=3);
	}
	</style>
	<![endif]--> 

	<!--[if lt IE 7]>
	<style type="text/css" media="all">
	.cie654 {display: block}
	</style>
	<![endif]--> 

	<!--[if !lt IE 7]>
	<style type="text/css" media="all">
	.cie7 {display: block}
	</style>		
	<![endif]--> 

	<!--[if IE 8]>
	<style type="text/css" media="all">
	.cie8 {display: block}
	</style>		
	<![endif]--> 

	<!--[if !IE]>--> <style type="text/css" media="all">.cnotie {display: block}</style> <!--<![endif]-->
</head>
<body id="body">

	<audio id="audio0" src="audio/20258__Koops__Page_Turn_24.wav" preload="auto" type="audio/wav"></audio>
	<audio id="audio1" src="audio/1257__Anton__hit_on_wood.wav" preload="auto" type="audio/wav"></audio>
	<audio id="audio2" src="audio/1258__Anton__hit_on_wood2.wav" preload="auto" type="audio/wav"></audio>
	<audio id="audio3" src="audio/37161__volivieri__soccer_stomp_01.wav" preload="auto" type="audio/wav"></audio>
	<audio id="audio4" src="audio/54405__KorgMS2000B__Button_Click.wav" preload="auto" type="audio/wav"></audio>
	<audio id="audio5" src="audio/32435__HardPCM__Wood012.wav" preload="auto" type="audio/wav"></audio>


<div id="title">
<span>ELBBARCS</span>
</div>

<div style="background-color: black; padding: 1em;">

<p>
Language:&nbsp;
<span id="language">
</span>&nbsp;
	<input type="submit" onclick="setLanguage('French');" value="French"></input>
	<input type="submit" onclick="setLanguage('English');" value="English"></input>
</p>

<p>
	<input id="text_field" type="text" onmousedown="resetTextField();" value="[type word here]" size="15" style="width: 25em"></input>
	<input type="submit" onclick="checkWord();" value="Check dictionary"></input>
	<input type="submit" onclick="findAnagrams();" value="Find anagrams"></input>
</p>
	<div id="anagrams" class="tableDivWrap"></div>
</div>

<p>
	<input type="submit" onclick="emptyBoardAndRack();" value="Empty board and rack"></input>
</p>
<p>
	<input type="submit" onclick="replenishRack();" value="Replenish rack"></input>
	<input type="submit" onclick="placeRandomTiles_Rack();" value="Randomize rack"></input>
</p>
<p>
	<input type="submit" onclick="placeRandomTiles_Board();" value="Randomize board"></input>
	<input type="submit" onclick="placeTileSet();" value="Display entire tile set"></input>
</p>

<div id="rack" class="tableDivWrap bottomShade"></div>

<!-- p>
	<input type="submit" onclick="playAction_resetTilesOnRack();" value="Take tiles back"></input>
	<input type="submit" onclick="playAction_submitWords();" value="Submit word(s)"></input>
	<input type="submit" onclick="playAction_drawNewTiles();" value="Draw new tiles (pass turn)"></input>
	<input type="submit" onclick="playAction_passTurn();" value="Pass turn"></input>
</p -->
<p>
	<input type="submit" onclick="verifyBoard();" value="Verify board"></input>
</p>
<div id="board" class="tableDivWrap surroundShade"></div>

<div id="letters" class="tableDivWrap" style="display:none;"></div>

</body>
</html>